<template>
    <MuteBox @refresh="updateView" />
    <el-dialog
    class="comment-box"
    v-model="isShowCommentBox"
    width="1400px"
    destroy-on-close
    :close-on-click-modal="false"	
    :close-on-press-escape="false"
    @closed="checkStatus"
    draggable 
    :center="true"
  >
    <h3>{{currentComment.title}}</h3>
    <div v-html="currentComment.html"></div>
    <div class="operate-panel">
      <el-button type="success" @click="isPassComment(true)">通过</el-button>
      <el-button type="danger" @click="isPassComment(false)">不通过</el-button>
    </div>
  </el-dialog>
    <div class="comment-info-container">
        <!-- 顶部查询 -->
        <div class="top-query">
            <el-page-header :icon="ArrowLeft" v-show="showHeader" @click="backToNormal">
                <template #content>
                    <span @click.stop="stopClickPropagation">检索结果</span>
                </template>
            </el-page-header>
            <el-form  :model="formline" :inline="true" ref="searchForm" :rules="rules" status-icon class="query-form">
                <el-form-item label="检索" prop="search">
                    <el-input v-model="formline.search" @keyup.enter="queryComment" placeholder="请输入" clearable >
                        <template #prepend>
                            <el-select v-model="formline.method" placeholder="请选择" style="width:70px">
                                <el-option label="影视名" value="title" />
                                <el-option label="ID" value="id" />
                                <el-option label="UID" value="uid" />
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryComment" :icon="Search">查询</el-button>
                </el-form-item>
            </el-form>
          <div class="status-filter">
            <label>状态</label>
                <el-radio-group v-model="status">
                    <el-radio label="全部">全部</el-radio>
                    <el-radio label="待审核">待审核</el-radio>
                    <el-radio label="审核中">审核中</el-radio>
                    <el-radio label="已审核">已审核</el-radio>
                </el-radio-group>
          </div>
        </div>
        <el-divider />
        <!-- 文章评论表格 -->
        <div class="comment-table-wrapper">
            <el-table
                class="comment-table"
                :data="tableData"
                :border="true"
            >
                <el-table-column prop="id" label="ID" width="100" :align="'center'" />
                <el-table-column prop="mtv_title" label="影视名称" min-width="200" :align="'center'" />
                <el-table-column prop="title" label="评论标题" min-width="300" :align="'center'" />
                <el-table-column prop="status" label="状态" width="100" :align="'center'" >
                    <template #default="scope">  
                        <el-tag effect="dark" :type="scope.row.status==='待审核'?'info':scope.row.status === '审核中'?'warning':'success'">
                        {{ scope.row.status }}
                        </el-tag>
                    </template>  
                </el-table-column>
                <el-table-column prop="replyNum" label="回复量" sortable width="100" :align="'center'" />
                <el-table-column prop="likeNum" label="点赞量" sortable width="100" :align="'center'" />
                <el-table-column prop="comment_date" label="评论日期" sortable width="200" :align="'center'" />
                <el-table-column prop="opreate" label="操作" width="190" :align="'center'" >
                    <template #default="scope">
                        <el-button  size="small"  type="warning" @click="examineComment(scope.row.id)" round :disabled="scope.row.status === '审核中' || scope.row.status === '已审核'"><Icon icon="comment-examine" right="5px" />审核</el-button>
                        <el-button  size="small"  v-if="scope.row.user_status==='正常'" type="warning" round @click="pageStore.openMuteBox(true,scope.row.uid,'lock')"><Icon icon="mute-user" right="5px"/>禁言</el-button>
                        <el-button  size="small" v-else type="warning" round @click="handleMute(0,scope.row.uid)"><Icon icon="comment-light" right="5px"/>解禁</el-button>
                    </template>  
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页部分 -->
        <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :background="true"
                :disabled="false"
                layout="total, prev, pager, next, jumper"
                :total="total"
                >
            </el-pagination>   
        </div>
    </div>

</template>

<script setup>
    import { ref,onBeforeMount,watch} from 'vue';
    import Icon from '@/components/Icon.vue';
    import MuteBox from '@/components/muteBox.vue';
    import { getCommentInfo,updateCommentStatus,deleteComment,getCommentSearch,getCommentDiffStatusInfo } from '@/api/index.js';
    import {usePageStore} from '@/store/modules/page.js';
    import {Search,ArrowLeft} from '@element-plus/icons-vue'
    import { ElMessage,ElDivider, ElPageHeader,ElForm, ElFormItem, ElButton,ElInput,ElSelect,ElRadioGroup,ElPagination,ElTableColumn,ElTag,ElTable,ElDialog,ElRadio,ElOption } from 'element-plus'
    const pageStore = usePageStore();
    /*模板引用变量*/
    const searchForm = ref(null);
    const status = ref('全部');
    const examineFlag = ref(false);
    /* 校验--顶部筛选 */
    const formline  = ref({search:'',method:''});
    const rules = {
        search: [{ required: true, message: '输入不为空', trigger: 'blur' }],
        method: [{ required: true, message: '请选择检索类型', trigger: 'blur' }],
    };
    const showHeader = ref(false);
  /*评论数据*/
  const tableData = ref([]);
    /*排序分页默认*/
    const orderBy = ref('comment_date');
    const order = ref('desc');
/*分页部分变量*/
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    //初始化数据
    onBeforeMount(()=>{
        getCommentList(orderBy.value,order.value,pageSize.value,0);
    });
    watch(currentPage,()=>{
        updateView();
    });
    watch(status,()=>{
        queryCommentStatus();
    });
/*操作部分变量*/
    let isShowCommentBox = ref(false);
    let currentComment = ref({
        html:'',
        title:'',
        uid:null,
        id:null,
    });
/*方法*/
const backToNormal = () => {
    showHeader.value = false;
    updateView();
}
const stopClickPropagation=(e)=> {
      e.stopPropagation(); // 阻止事件冒泡
}
//搜索筛选
const queryComment = ()=>{
    searchForm.value.validate((valid) => {
      if(valid && formline.value.method){
        getCommentSearch({search:formline.value.search,method:formline.value.method,orderBy:orderBy.value,order:order.value,limit:pageSize.value,offset:0}).then((res)=>{
            if(res.status.code === 200){
                tableData.value = res.data.info;
                total.value = res.data.total;
                showHeader.value = true;
            }else{
                ElMessage.error(res.status.msg);
            }
            
        });
      }else{
        ElMessage.error('请选择检索类型');
      }  
    })
}
const queryCommentStatus=()=>{
    getCommentDiffStatusInfo({status:status.value,orderBy:orderBy.value,order:order.value,limit:pageSize.value,offset:0}).then((res)=>{
        if(res.status.code==200){
            tableData.value = res.data.info;
            total.value = res.data.total;
            showHeader.value = true;
        }else{
            ElMessage.error(res.status.msg);
        }
    })
}
//更新视图
const updateView = ()=>{
    let offset = (currentPage.value-1)*pageSize.value;
    getCommentList(orderBy.value,order.value,pageSize.value,offset);
}
//获取评论列表
const getCommentList = (orderBy,order,limit,offset)=>{
    getCommentInfo({orderBy,order,limit,offset}).then(res=>{
        if(res.status.code === 200){
            tableData.value = res.data.info;
            total.value = res.data.total;
        }else{
            ElMessage.error(res.status.msg);
        }
    });
}
//审查评论
const examineComment = (id)=>{
    //打开文章进行审查
    isShowCommentBox.value = true;
    let item = {...tableData.value.find(item=>item.id===id)};
    currentComment.value.html = item.comment_html;
    currentComment.value.title = item.title;
    currentComment.value.uid = item.uid;
    currentComment.value.id = item.id;
    changeCommentStatus(id,'审核中');
}
//改变评论状态
const changeCommentStatus = (id,status)=>{
    updateCommentStatus({id,status,uid:currentComment.value.uid}).then(res=>{
            if(res.status.code === 200){
                tableData.value.find(item=>item.id===id).status = status;
            }
        });
}
//是否通过评论
const isPassComment = (flag)=>{
    let id = currentComment.value.id;
    if(flag){
        changeCommentStatus(id,'已审核');
        examineFlag.value = true;
    }else{
        deleteComment({id,uid:currentComment.value.uid}).then(res=>{
             if(res.status.code === 200){
                 tableData.value = tableData.value.filter(item=>item.id!==id);
             }   
        });
        examineFlag.value = true;
    }
    isShowCommentBox.value = false;
}
//检查当前审核的状态
const checkStatus = ()=>{
    if(!examineFlag.value){
        changeCommentStatus(currentComment.value.id,'待审核');
    }
}
//解禁用户
const handleMute=(days,id)=>{
    pageStore.uid = id;
    pageStore.days = days;
    pageStore.openMuteBox(true,id,"unlock");
}
</script>

<style scoped lang='scss'>
h3{
    text-align: center;
}
.comment-box{
    padding: 10px;
}
.operate-panel{
    display: flex;
    justify-content:center;
    margin-top: 20px;
}
@mixin flexBetween{
    display: flex;
    justify-content: space-between;
}
.comment-info-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.comment-table-wrapper{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}
.admin-info-editor{
    label{
        width:100px;
    }
    .status-filter{
        @include flexBetween;
        margin-top: 10px;
    }
}
label{
    display: inline-block;
    width: 50px;
    font-size: 14px;
    line-height: 30px;
    color: #606266;
}
.top-query{
    display: flex;
    width:100%;
    height:50px;
    margin-top:20px;
    justify-content: space-around;
    .status-filter{
        display: flex;
        :deep(.el-radio-group){
            display: block !important;
        }
    }
}
:deep(.el-select__wrapper){
    min-width:180px;
}  
.comment-table{
    width:99% !important;
    margin: 0 auto;
    height: 65vh;
}
.pagination{
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>